<template>
	<view>
		<view class="xianjin_lucky" :style="'background-image: url(' + xianjin_lucky_bg+ ')'">
			<p class="fw f28">{{item.name}}</p>
			<p class="f24 c_868686">{{item.msg}}</p>

			<button open-type="share">分享</button>
		</view>
		<!-- 商品 -->
		<view class="flex boxdraw">

			<scroll-view scroll-x class="scroll-view">

				<view @click.stop="goTaskDetail(d.t_id)" v-for="(d,index) in taskList " :key="index"
					class=" flexcolumn aligncenter justifycenter bgc_fff"
					:class="{' mr20 ': index<1,'drawone':d.type==1,'drawother':d.type==2}">

					<template v-if="d.type==2">
						<view class="f24 c_000 textcenter fw mb10">{{d.end_time|timeDate}}</view>
						<view class="box_center">
							<view class="goodinner mb10" :style="'background-image: url(' + goodinner+ ')'">
								<image :src="`${imgPath}/upload/h5/home/hongbao02.png`"></image>
								<!--	<image src="http://lottery.yywlcm.com/upload/h5/home/8.png" mode=""></image> -->
							</view>
						</view>
						<view class="f26 c_000 mb10">¥2333</view>
						<view class="box_center">
							<view @click.stop="remind" class="tx_button f26 c_fff flexcenter">
								<image :src="`${imgPath}/upload/h5/home/5.png`" mode="" class="mr10">
								</image>
								提醒我
							</view>
						</view>
					</template>
					<template v-if="d.type==1">
						<view class="f24 c_fff textcenter fw">{{d.end_time|timeDate}}</view>
						<view class="good_box">
							<image :src="`${imgPath}/upload/h5/home/hongbao01.png`" alt="" />
						</view>
						<image :src="`${imgPath}/upload/h5/home/3.png`" alt="" class="cj_img textcenter" />
					</template>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
		compareDate
	} from "@/utils/common.js"
	export default {
		props: ["item"],
		data() {
			return {
				xianjin_lucky_bg: `${uni.imgPath}/upload/h5/home/1.png`,
				goodinner_bg: `${uni.imgPath}/upload/h5/home/11.png`,
				drawone_bg: `${uni.imgPath}/upload/h5/home/4.png`,
				imgPath: uni.imgPath
			}
		},
		methods: {
			remind(event) {

				var templateId = 'HJNSvLLMZxz4drMwbGd4zorEPNxToR02kTa-czrk3r0'
				uni.requestSubscribeMessage({
					tmplIds: [templateId], // 需要订阅的模板ID
					success(res) {
						console.log(res);
						if (res[templateId] === 'accept') {
							console.log("用户接受订阅")
						} else {
							console.log("用户拒绝了订阅")
						}
						// 用户允许订阅通知
					},
					fail(err) {
						// 用户拒绝授权或其他错误
						console.error(err);
						// 引导用户前往【设置】页面打开【接受订阅消息】权限
						wx.showModal({
							title: '通知订阅失败',
							content: '请前往【设置】页面打开【接受订阅消息】权限，并确保下方订阅消息都已经接受。',
							success(res) {
								if (res.confirm) {
									wx.openSetting({
										success(res) {
											// 用户在【设置】页面打开了订阅消息权限后的回调
											console.log(res);
										},
										fail(err) {
											console.error(err);
										}
									});
								}
							}
						});
					}
				});
			},
			goTaskDetail(tId) {
				uni.navigateTo({
					url: `/pagesTask/tastDetail/index?tastId=${tId}`
				})
			}
		},
		mounted() {

		},
		computed: {
			taskList: function() {
				this.item.task_list = this.item.task_list.map((item) => {
					// 获取当前时间
					var type = 0;
					var currentTime = new Date();
					var startTime = new Date(item.start_time);
					var endTime = new Date(item.end_time);
					if (currentTime >= startTime && currentTime <= endTime) {
						type = 1
					} else if (currentTime < startTime) {
						type = 2
					}
					item.type = type;
					return item
				})
				var arr = this.item.task_list.sort(function(a, b) {
					return new Date(a.end_time) - new Date(b.end_time);
				});
				return arr
			}
		},
		filters: {
			timeDate(val) {
				return compareDate(val)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.xianjin_lucky {
		position: relative;
		background-size: 100% 100%;
		padding: 30rpx;
		margin-bottom: 15rpx;

		p {
			line-height: 50rpx;
		}

		button {
			padding: 0;
			width: 100rpx;
			line-height: 48rpx;
			font-size: 26rpx;
			border-radius: 50rpx;
			background: linear-gradient(180deg, #148DFF 0%, #6CC3FF 100%);
			color: #fff;
			position: absolute;
			right: 3%;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.boxdraw {
		padding: 6rpx 20rpx 15rpx 20rpx;
		align-items: flex-end;

		.scroll-view {
			white-space: nowrap;
			width: 100%;
			overflow: hidden;
		}
	}

	.drawone {
		width: 224rpx;
		height: 300rpx;
		background: url('https://lottery.yywlcm.com/upload/h5/home/4.png') center center no-repeat;
		background-size: cover;
		padding: 10rpx;
		display: inline-block;
		margin: 0 22rpx 0 0;

		.cj_img {
			width: 68rpx;
			height: 68rpx;
			margin: auto;
			display: block;
		}

		.good_box {
			height: 150rpx;
			margin: 20rpx 0;

			image {
				max-width: 100%;
				height: 100%;
			}
		}
	}

	.drawother {
		width: 210rpx;
		height: 280rpx;
		border-radius: 20rpx;
		padding: 10rpx;
		display: inline-block;
		margin: 0 22rpx 0 0;
		text-align: center;

		.box_center {
			display: flex;
			justify-content: center;
		}
	}

	.tx_button {
		width: 170rpx;
		height: 50rpx;
		background: linear-gradient(180deg, #148BFF 0%, #6EC6FF 100%);
		border-radius: 30rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.goodinner {
		height: 120rpx;
		width: 120rpx;

		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;

		image {
			max-width: 100%;
			height: 100%;
		}
	}
</style>